<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    wrap()
      被包裹元素.wrap(包裹元素)
      每一个元素都会被选择的元素包裹
    unwrap()
      将对应的元素取消父元素的包裹状态
      该方法如果是一个元素调用的，那么该元素的所有同胞元素都会被取消包裹
    wrapAll()
      所以元素是一个集合，被一个元素包裹
      调用wrapAll的元素如果没有在同一个父元素，那么就会把所有的都提取到离body最近的那个元素位置进行包裹

      如果对应的元素分布在不同的父元素中，按顺序，越靠前的优先级越高
    wrapInner()
      将所选元素的内部标签或内容用对应元素包裹
  -->
  <div>
    <div>
      <span>内容10</span>
    </div>
  </div>
  <div class="box1">
    <span>内容1</span>
    <div class="box2">
      <span>内容2</span>
      <span class="demo">内容3</span>
      <span>内容4</span>
      <span>内容5</span>
    </div>
  </div>
  
  
  <script src="../libs/jquery-1.12.4.js"></script>
  <script>
    $(function () {
      // $('span').wrap('<div/>')
      // $('span').wrapAll('<div/>')
      // $('.demo').wrapAll('<div/>')
      // $('span').unwrap()
      // $('.demo').unwrap()
      // $("span").wrapAll('<div/>')
      $('span').wrapInner("<em/>")

    })
  
  </script>
</body>
</html>